<template>
  <div class="login-page">
    <div class="login-page__wrap">
      <div class="login-box">
        <h3 class="login-box__title">登录</h3>
        <a-form class="login-box__form" :model="formState" :label-col="{ span: 4 }">
          <a-form-item label="手机号" name="phone">
            <a-input
              type="string"
              v-model:value="formState.phone"
              @keydown.enter="handleEnterKey"
              placeholder="请输入手机号"
            ></a-input>
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input
              type="password"
              v-model:value="formState.password"
              @keydown.enter="handleEnterKey"
              placeholder="请输入密码"
            ></a-input>
          </a-form-item>
          <a-flex justify="center">
            <a-button type="primary" @click="loginFun" :loading="isLoading" :disabled="isLoading">
              {{ isLoading ? '登录中...' : '登录' }}
            </a-button>
            <a-button type="link" @click="router.push({ path: '/register' })" :disabled="isLoading">
              没有账号? 去注册 >
            </a-button>
          </a-flex>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { userLogin } from '@/api/login';
import type { ILoginForm } from '@/interface/user';
import { setCookieFun } from '@/utils/storage';
import { message } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();
const formState = reactive<ILoginForm>({
  phone: '',
  password: '',
});

// 登录加载状态
const isLoading = ref(false);

// 表单验证
const validateForm = (): boolean => {
  if (!formState.phone.trim()) {
    message.warning('请输入手机号');
    return false;
  }

  if (!formState.password.trim()) {
    message.warning('请输入密码');
    return false;
  }

  // 简单的手机号格式验证
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phoneRegex.test(formState.phone)) {
    message.warning('请输入正确的手机号格式');
    return false;
  }

  if (formState.password.length < 6) {
    message.warning('密码长度不能少于6位');
    return false;
  }

  return true;
};

// 回车键处理
const handleEnterKey = () => {
  // 防止在加载状态下重复提交
  if (!isLoading.value) {
    loginFun();
  }
};

const loginFun = async () => {
  // 表单验证
  if (!validateForm()) {
    return;
  }

  // 防止重复提交
  if (isLoading.value) {
    return;
  }

  try {
    isLoading.value = true;
    console.log(formState);
    const res = await userLogin(formState);
    if (res.code === 0) {
      setCookieFun('token', res.access_token);
      message.success('登录成功');

      // 获取重定向路径，如果没有则默认跳转到课程页面
      const redirectPath = (route.query.redirect as string) || '/course';

      // 使用replace而不是push，避免用户通过后退按钮回到登录页
      router.replace({
        path: redirectPath,
      });
    }
  } catch (e) {
    console.log(e);
  } finally {
    isLoading.value = false;
  }
};
</script>

<style lang="less" scoped>
.login-page,
.login-page__wrap {
  width: 100%;
  height: 100%;
}

.login-page__wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.login-box {
  width: 420px;
  padding: 32px;
  background: white;
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);

  &__title {
    padding: 0 0 32px 0;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
  }

  &__form {
    .ant-form-item {
      margin-bottom: 24px;

      :deep(.ant-form-item-label) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }

    .ant-input {
      height: 44px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      transition: all 0.2s ease;

      &:focus,
      &:hover {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
      }
    }

    .ant-btn-primary {
      border-radius: 8px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      transition: all 0.2s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .ant-btn-link {
      color: #64748b;
      transition: all 0.2s ease;

      &:hover {
        color: #667eea;
      }
    }
  }
}
</style>
